<!DOCTYPE html>
<html>
	<head>
	  	<meta charset="UTF-8">
		<script src="../../public/js/tmpl.js"></script>
		<script>
			var content = template('Phead_resource', {
				title: '预约私教'
			});
			document.write(content);
		</script>
  	</head>
	<body class="wrap_bg appointment">
		
		<section>
			<div data-am-widget="tabs" class="am-tabs am-tabs-d2 margin0 color-grey" id="slider_tab">
				<ul class="am-tabs-nav am-g" data-am-sticky="{top:0}">
					<li class="am-u-sm-6 am-text-center border-right-grey am-active">
						<a href="javascript:void(0)">
							<span class="color-white">未开始的预约</span>
						</a>
					</li>
					<li class="am-u-sm-6 am-text-center">
						<a href="javascript:void(0)">
							<span class="color-white">结束的预约</span>
						</a>
					</li>
				</ul>
			    <div class="am-tabs-bd bordernone course_tabs-bd border-bottom-grey">
			    	
			    </div>
			</div>
			
			
		</section>
		
		
		<div class="top_tip am-text-sm color-white"></div>
		
		
		
		<script>
			var content = template('progress_status', {});
			document.write(content);
		</script>
		
		<script>
			var content = template('Pfoot_resource', {});
			document.write(content);
		</script>
		
		<!--模板-->
		
		<!--预约课程-->
		<script id="gymnasium_course" type="text/html">
			{{each building_list}}
			
      		{{each $value.course_list}}
      		<li class="cell {{if $index!=0}}border_top{{/if}}">
      			
  				<div class="cell_first am-cf">
	      			<div class="am-fl">
	      				<span class="color-grey">{{$value.course_type}}</span>
	      			</div>
	      			<div class="am-fr">
	      				<a href="javascript:void(0);">
	      					<!--<span class="color-grey">查看地图&nbsp;</span>-->
	      					<i class="am-icon-angle-up am-cion-fw color-grey"></i>
	      				</a>
	      			</div>
	      		</div>
	      		<div class="cell_cont">
		      		<a href="{{if $value.isVoid}}./order_detail_refundding.html{{else}}./order_detail.html{{/if}}">
		      			<div class="am-g">
		      				<div class="am-u-sm-9 media_body">
		      					<div class="marginb10">
		      						<p class="color-white am-text-sm">{{$value.name}}</p>
		      						<p class="color-grey">{{$value.address}}</p>
		          					<p>
		          						<span class="color-grey am-margin-right-sm">{{$value.datetime}}</span>
		          						<span class="active_color">{{$value.time}}</span>
		          						<!--<span class="color-whites">￥{{$value.price}} &nbsp;(超猩卡￥{{$value.discount_price}})</span>-->
		          					</p>
		      					</div>
		      				</div>
		      				<div class="am-u-sm-3 media_img">
		      					<img class="am-circle" src="{{$value.imgsrc}}" />
		      				</div>
		      			</div>
		      		</a>
		      		
	      			{{if $value.isOvertime}}
	      			<div class="active_bg color-white padding10 tip_bar">
	      				<a href="./add_payment.html"  class="color-white am-cf am-block" target="_self">
		      				<div class="am-fl">
		      					<span>此次预约您已超时1小时，请及时补交费用</span>
		      				</div>
		      				<div class="am-fr">
	      						<spam>去付款</spam>
	      						<span class="am-icon-angle-right am-cion-fw color-white"></span>
		      				</div>
	      				</a>
	      			</div>
	      			{{/if}}
      			</div>
      		</li>
			{{/each}} 
			
			
			{{/each}} 	
		</script>
		
		
		
		<!--全部滚动数据-->
		<script id="course_tabs-bd" type="text/html">
			{{each buildding_courseList}}
			<div class="am-tab-panel {{if $index==0}}am-active{{/if}}">
	          	<ul class="list bgs0">
	          		{{include 'gymnasium_course' $value}}
	          	</ul>
	        </div>
			{{/each}}
		</script>
		
		
		<script>
		 	(function($,arttmpl){
		 		
		 		var buildding_courseList = [
		 			{
				 		building_list:[
				 			{
				 				building_name:'杭州定安路健身馆',
				 				tip_text:'猩猩排课中(每周五22:30发布)',
				 				course_list:[
				 					{
				 						course_type:'场地预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市西湖区文一路138号出田园',
				 						tags:['Les','燃脂','有氧'],
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'0',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:false,
				 						isVoid:false
				 					},
				 					{
				 						course_type:'私教预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市滨江区滨盛路138号区政府',
				 						tags:['Les','燃脂','有氧'],
				 						date_time:'07:20-008:20',
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'1',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:false,
				 						isVoid:false
				 					},
				 					{
				 						course_type:'获得预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市上城区江城路399号向谢大神',
				 						tags:['Les','燃脂','有氧'],
				 						date_time:'07:20-008:20',
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'2',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:false,
				 						isVoid:false
				 					}
				 				]
				 			},
				 		]
			 		},
			 		{
				 		building_list:[
				 			{
				 				building_name:'杭州定安路健身馆',
				 				tip_text:'猩猩排课中(每周五22:30发布)',
				 				course_list:[
				 					{
				 						course_type:'场地预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市西湖区文一路138号出田园',
				 						tags:['Les','燃脂','有氧'],
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'0',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:false,
				 						isVoid:true,
				 						
				 					},
				 					{
				 						course_type:'私教预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市滨江区滨盛路138号区政府',
				 						tags:['Les','燃脂','有氧'],
				 						date_time:'07:20-008:20',
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'1',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:true,
				 						isVoid:false,
				 					},
				 					{
				 						course_type:'获得预约',
				 						imgsrc:'../../public/img/shop/buildbody_img003.jpg',
				 						name:'bodyattack有氧挑战',
				 						address:'杭州市上城区江城路399号向谢大神',
				 						tags:['Les','燃脂','有氧'],
				 						date_time:'07:20-008:20',
				 						price:'69',
				 						discount_price:'68.55',
				 						status:'2',
				 						datetime:'2017-10-23',
				 						time:'08:20-09:20',
				 						isOvertime:false,
				 						isVoid:false
				 					}
				 				]
				 			},
				 		]
			 		}
			 	];
		 		
		 		
				
				/*绘制课程*/
		 		var drawCourseTabs = function(data){
		 			var d= {
		 				buildding_courseList:data
		 			}
		 			
		 			var content = arttmpl('course_tabs-bd', d);
		 			$('.course_tabs-bd').prepend(content);
		 			
		 			
		 			var $nav_items = $('.am-tabs-nav li');
					var $tabsBox = $('#slider_tab .am-tabs-bd');
					var boxW = $('#slider_tab .am-tabs-bd').width();
					var currentIndex = 0;
					
					$nav_items.click(function(){
						currentIndex = $nav_items.index($(this));
						tabbar.find('li.active').removeClass('active');
						$(this).addClass('active');
						$tabsBox.children('.am-active').removeClass('am-active');
						$tabsBox.children().eq(currentIndex).addClass('am-active')
					});
		 			
		 			
		 			$('.cell_first').click(function(){
		 				var $next = $(this).next('.cell_cont');
		 				var $icon = $(this).find('.am-cion-fw');
		 				var isHidden = $next.is(":hidden");
		 				
		 				$next.slideToggle();
		 				
		 				if(isHidden){
		 					$icon.removeClass('am-icon-angle-down').addClass('am-icon-angle-up')
		 				}else{
		 					$icon.removeClass('am-icon-angle-up').addClass('am-icon-angle-down')
		 				}
		 			})
		 			
		 			
		 		}
				
				
				var sucessCallback_CourseTabs = function(res){
					drawCourseTabs(res);
				}
				
				var errorcallback = function(statuscode, statusmsg) {
					console.log(statuscode + "  " + statusmsg);
				};
					
				var faildcallback = function(xhr, errtype, errthow) {
					console.log(xhr.readyState + "  " + xhr.status + "  " + xhr.statusText);
				};
	
				
				
				
				
				var GetCourseTabs_data = function(op, sucessCallback, errorcallback, faildcallback){
					request('url', 't', 'd', buildding_courseList, sucessCallback, errorcallback, faildcallback);
				}
					
				var init = function(){
					
					GetCourseTabs_data('op', sucessCallback_CourseTabs, errorcallback, faildcallback);
					var $modal = $('#my-modal-loading');
					$modal.hide();
					
				}
				
				
				init();
				
				
		 	})(jQuery,template)
			
		</script>
		
	</body>
</html>
